<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>绘制时间</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/digit.js"></script>
<script>
  const CANVAS_HEIGHT = 768;
  const CANVAS_WIDTH = 1024;
  const RADIUS = 8;
  const MARGIN_TOP = 60;
  const MARGIN_LEFT = 30;
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  render(context);

  function render(ctx) {
    let hour = 12;
    let minute = 34;
    let second = 56;

    renderDigit(MARGIN_LEFT, MARGIN_TOP, Math.floor(hour / 10), ctx);
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, Math.floor(hour % 10), ctx);
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, ctx);
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, Math.floor(minute / 10), ctx);
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, Math.floor(minute % 10), ctx);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, ctx);
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, Math.floor(second / 10), ctx);
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, Math.floor(second % 10), ctx);
  }

  /**
   * 绘制数字
   * @param x{Number} 位置x
   * @param y{Number} 位置y
   * @param num{Number} 数字
   * @param ctx
   */
  function renderDigit(x, y, num, ctx) {
    ctx.fillStyle = "#3149be";
    for (let i = 0, len = digit[num].length; i < len; i++) {
      for (let j = 0, len2 = digit[num][i].length; j < len2; j++) {
        if (digit[num][i][j] === 1) {
          ctx.beginPath();
          ctx.arc(x + (j * 2 + 1) * (RADIUS + 1), y + (i * 2 + 1) * (RADIUS + 1), RADIUS, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill()
        }
      }
    }
  }
</script>
</body>
</html>
